import Icon, * as iconsModules from '@ant-design/icons';
import { svgIcons, icons } from '@u/icons';

/***
 * 图标组件
 */
export default function MyIcon({ icon, ...props }) {
	/***************************ElIcon组件********************************/
	const ElIconsShow = !!icons.find((item) => item === icon);
	if (ElIconsShow) {
		return <Icon {...props} component={iconsModules[icon]} />;
	}

	/***************************自定义svg组件********************************/
	// 计算属性 useMemo，[icon]依赖项
	const svgIconsShow = !!svgIcons.find((item) => item === icon);
	if (svgIconsShow) {
		return (
			<span role="img" {...props}>
				<svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">
					<use href={`#icon-${icon}`} />
				</svg>
			</span>
		);
	}
}

/***
 * 参数属性
 * @property {String} icon 图标名称
 */
MyIcon.propTypes = {
	icon: propTypes.string
};
